import React, { useState, useEffect, useMemo } from 'react'
import { LeftOutline, UploadOutline } from 'antd-mobile-icons'
import './lfr-App.css'
import reactLogo from '../../../assets/2.png'
import axios from 'axios'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile';
import {useNavigate} from 'react-router-dom'

const InfiniteScrollContent = ({ hasMore }) => {
  return (<>
    {hasMore ? (<>
        <span>Loading</span>
        <DotLoading />
      </>) : (<span>--- 我是有底线的 ---</span>)}
  </>);
};

export default function Sea() {
  const [list, setlist] = useState([])
  const navigate=useNavigate()

  const [len,setlen]=useState(3)
    const [hasMore, setHasMore] = useState(true);
    async function loadMore() {
        
        setTimeout(()=>{
          setlen(len+3)
          setHasMore(len<list.length);
        },3000)
    }

  const getlist = () => {
    axios.get('http://127.0.0.1:3000/lfr_index/hote').then(res => {
      console.log(res.data);
      setlist(res.data)
    })
  }

  const newlist = useMemo(() => {
    return [...list].filter(item => item.name.includes('三亚'))
  })

  useEffect(() => {
    getlist()
  }, [])
  return (
    <div className='diva'>
      <div className='d'>
        <div className='dx'>
        <div className='div1'>
          <p onClick={()=>{navigate('/list')}} ><LeftOutline   /></p>
          <p style={{ fontSize:'2.3rem'}}>海景酒店</p>
          <p ><UploadOutline  /></p>
        </div>
        </div>
        <img src={reactLogo} className='img1' ></img>
        <div className='div2'>
          {
            newlist.splice(0,len).map(item => {
              return <div key={item._id} className='div3'>
                <img src={item.img}></img>
                <ul>
                  <li>{item.name}</li>
                  <li className='p'>{item.address}</li>
                  <li className='p1'>￥{item.price}<span>起</span></li>
                </ul>
              </div>
            })
          }
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent hasMore={hasMore}/>
      </InfiniteScroll>
        </div>
      </div>
    </div>
  )
}
